<template>

  <el-container class="wrapper">
    <el-aside :width="asideWidth" class="left-aside transition-all">
      <div class="aside-logo">
        <div class="text">{{ collapse?"无":"后台模板" }}</div>
      </div>
      <div class="aside-menus">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            :collapse="collapse"
            @open="handleOpen"
            @close="handleClose"
            @select="menuClick"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="1-1">用户列表</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="2">
            <el-icon>
              <icon-menu/>
            </el-icon>
            <template #title>Navigator Two</template>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <el-icon>
              <document/>
            </el-icon>
            <template #title>Navigator Three</template>
          </el-menu-item>
          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <setting/>
              </el-icon>
              Navigator Four
            </template>
            <el-menu-item index="4-1">
              Page1
            </el-menu-item>
            <el-menu-item index="4-2">
              Page2
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
    </el-aside>
    <el-container class="right-wrapper">
      <el-header class="right-header">
        <div class="header-left">
          <Icon icon="ant-design:menu-fold-outlined" :height="24" class="cursor-pointer"
                @click="handleAsideChange" v-if="asideWidth==='200px'"
          />
          <Icon icon="ant-design:menu-unfold-outlined" :height="24" class="cursor-pointer"
                @click="handleAsideChange" v-else
          />
        </div>
        <div class="header-right">
          <div class="avatar cursor-pointer">
            <el-dropdown trigger="click" size="small" @command="handleUserDropMenu">
              <span class="el-dropdown-link">
                <el-avatar
                    alt=""
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="edit-password">修改密码</el-dropdown-item>
                  <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
        <el-tabs
            v-model="tabs.activeIndex"
            type="border-card"
            closable
            v-if="tabs.openTab.length"
            @tab-click='tabClick'
            @tab-remove='tabRemove'
        >
          <el-tab-pane
              :key="item.name"
              v-for="(item, index) in tabs.openTab"
              :label="item"
              :name="item">
          </el-tab-pane>
        </el-tabs>
      <el-main class="right-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>
<script lang="ts" setup="setup">
import {Icon} from "@iconify/vue";
import {computed, onMounted, ref, watch} from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import {useRouter} from "vue-router";
import {ElMessage, TabPanelName, TabsPaneContext} from "element-plus";
import useTabStore from "@/store/modules/useTabStore";
const router = useRouter();
const tabs = useTabStore();
const asideWidth = ref('200px');
const handleAsideChange = () => {
  asideWidth.value = asideWidth.value === '200px' ? '60px' : '200px';
}
const collapse = computed(() => {
  return asideWidth.value !== '200px';
});
const handleUserDropMenu=(c:string)=>{
  switch (c){
    case 'logout':
      router.push({name:'Login'});
      ElMessage.info('退出成功');
      break;
  }
};

const tabClick = (pane: TabsPaneContext, ev: Event)=>{
  console.log(pane.paneName)
  var path = pane.paneName!.toString();
  console.log(path.slice(2));
  router.push({path:path.slice(2)})
}
const tabRemove=(name: TabPanelName)=>{
  if(tabs.openTab!.length>1) {
    tabs.del_tab(name.toString());
    router.push({path: tabs.openTab![0].slice(2)});
  }
}
const menuClick=(index:string)=>{
  switch(index){
    case '1-1':
      router.push({name:"UserList"});
      break;
    case '4-1':
      tabs.add_tab('/#/admin/page1');
      router.push({name:'page1'});
      break;
    case '4-2':
      tabs.add_tab('/#/admin/page2');
      router.push({name:'page2'});
      break;
  }
};
</script>

<style scoped lang="scss">
.wrapper {
  @apply h-full w-full;
}

.left-aside {
  @apply h-full bg-gray-100 flex flex-col;
  .aside-logo {
    @apply text-center h-10 py-2 px-4 text-white bg-black select-none;
  }
  .aside-menus {
    @apply h-full overflow-x-hidden;
  }
}

.right-wrapper {
  @apply flex-1 ;
}

.right-header {
  @apply bg-indigo-200 flex items-center justify-between;
  .header-left {
    @apply flex;
  }
  .header-right {
    @apply flex;
  }
}

.right-main {
  @apply bg-green-300;
}
</style>
<style>
.el-tabs--border-card>.el-tabs__content {
  padding: 0px;
}
</style>